import {Button, Image, SafeAreaView, SectionList, StyleSheet, Text, View} from 'react-native';
import favicon from "../../assets/favicon.png";
import React from "react";

export default function DataWeek({navigation}) {
    return <SafeAreaView style={styles.container} key='2'>
        <SectionList
            sections={DATA}
            keyExtractor={(item, index) => item + index}
            renderItem={({item}) => (
                <View style={styles.item}>
                    <Image style={styles.img} source={favicon}/>
                    <Text style={styles.text} onPress={()=>navigation.navigate('Take')}>1{item}</Text>
                </View>
            )}
            renderSectionHeader={({section}) => (
                <Text style={styles.timeTitle}>{section.title}</Text>
            )}

        />
    </SafeAreaView>;
}


const DATA = [
    {
        title: '周一',
        data: ['数据1', '数据2', '数据3'],
    },
    {
        title: '周二',
        data: ['数据4', '数据5', '数据6','数据1', '数据2', '数据3'],
    },
    {
        title: '周三',
        data: ['数据1', '数据2', '数据3'],
    },
    {
        title: '周四',
        data: ['数据1', '数据2', '数据3'],
    }
];


const styles = StyleSheet.create({
    container: {
        flex: 1,
        position:"relative"
    },
    box: {
        position:'absolute',
        bottom:"15%",
        right:'5%',
        width: 60
    },
    image: {
        width: 200,
        height: 200,
    },

    timeTitle:{
        marginTop:5,
        color:'#1C90D1',
        fontSize:11,
        textAlign:"right",
        marginRight:15,
        fontWeight:"bold",
    },
    item:{
        flex:1,
        display:"flex",
        flexDirection:"row",
        alignItems:"center",
        padding:5,
        marginLeft:10,
        marginBottom:5,
        borderBottomWidth:0.5,
        borderBottomColor:"#CFCFCF",
    },
    text:{
        flex:1,
        fontSize:14,
        color:"#3B3B3B",
        fontWeight:'400',
    },
    img:{
        backgroundColor:"#E7E1DF",
        width:30,
        height:30,
        marginRight:10
    },

    TakeItem:{
        flex:1,
        width:"91%",
        position:'absolute',
        bottom:"21%",
        right:'4%'
    }
});